<template>
<el-dialog
      :title="$t('piLiangShenHe')"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="1200px"
      :before-close="handleClose"
    >
    <el-table :data="tableData" border max-height="400">
      <el-table-column prop="id" label="ID" min-width="50" />
        <el-table-column :label="$t('shangPinTuPian')" min-width="80">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.image"
                :preview-src-list="[scope.row.image]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('shangPinMingCheng')"
          prop="storeName"
          min-width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          :label="$t('shangPinFenLei')"
          prop="categoryId"
          align="center"
          min-width="140"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-tag class="tag">
              {{ scope.row.categoryName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('shangPinShouJia')"
          prop="price"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="merName"
          :label="$t('shangHuMingCheng')"
          min-width="180"
          :show-overflow-tooltip="true"
        />
        <el-table-column :label="$t('shangHuLeiBie')" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.isSelf | selfTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="sales"
          :label="$t('xiaoLiang')"
          min-width="100"
        />
        <el-table-column prop="stock" :label="$t('kuCun')" min-width="70" />
    </el-table>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px" style="margin-top: 15px;">
          <el-form-item :label="$t('shenHeZhuangTai')" prop="auditStatus">
            <el-radio-group v-model="formData.auditStatus">
              <el-radio label="success">{{ $t('tongGuo') }}</el-radio>
              <el-radio label="fail">{{ $t('juJue') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="formData.auditStatus === 'fail'" :label="$t('yuanYin')" prop="reason">
            <el-input v-model="formData.reason" type="textarea" />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleClose">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="onSubmit">{{
              loading ? $t('tiJiaoZhong') + ' ...' : $t('confirm')
            }}</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { productAuditApi } from '@/api/store';

export default {
  data() {
    return {
      dialogVisible:false,
      rules: {
        auditStatus: [{ required: true, message: this.$t('qingXuanZeShenHeZhuangTai'), trigger: 'change' }],
        reason: [{ required: true, message: this.$t('qingTianXieJuJueYuanYin'), trigger: 'blur' }]
      },
      formData: {
        reason: '',
        auditStatus: 'success',
        idList: ''
      },
      loading:false,
      tableData:[]
    };
  },
  methods: {
    show(tableData){
      this.tableData = tableData
      this.dialogVisible = true;
      this.formData.idList = tableData.map(it=>it.id);
    },
    handleClose() {
      this.$refs.formRef.resetFields();
      this.dialogVisible = false;
      this.loading = false;
      this.tableData  = []
    },
    onSubmit(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.loading = true;
          productAuditApi(this.formData)
            .then((res) => {
              this.$message.success(this.$t('caoZuoChengGong'));
              this.$emit('subSuccess');
              this.loading = false;
              this.handleClose()
            }).catch((res) => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    }
  },
};
</script>
<style scoped lang="scss">

</style>
